<!--
 * @Descripttion: 
 * @version: 
 * @Author: 尹伊
 * @Date: 2020-05-28 16:51:52
 * @LastEditors: 尹伊
 * @LastEditTime: 2020-06-01 19:32:11
-->
<template>
  <div class="animate">
    <!-- <animate-number from="1" to="1000" duration="2000" :formatter="formatter"></animate-number> -->
    <!-- <animate-number from="1" to="100000" duration="3000"></animate-number> -->
    <animate-number ref="myNum" from="20" :to="number" mode="manual" :formatter="formatter"></animate-number><br>
    <el-button @click="startAnimate()" type='primary' style="margin-top: 10px;"> animate</el-button>
  </div>
</template>
<script>
  export default {
    name: 'anim',
    head() {
      return {
        title: '数字动画'
      }
    },
    data() {
      return {
        number: 10
      }
    },
    watch: {
      number(val) {
        this.number = val
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        this.number = 10
      },
      formatter: function (num) {
        return num.toFixed(1) //小数点后几位，数字就是几小数点后几位
      },
      startAnimate: function () {
        this.$refs.myNum.start()
      }
    }
  }
</script>

<style scoped lang="scss">
  .animate {
    width: 100%;
    background-color: #ffffff;
    padding: 20px;
    font-size: 24px;
  }
</style>